<template>
  <div class='question-bank'>
    <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false">
    </el-alert>
    <el-table :header-cell-style="{ color: '#909399', backgroundColor: '#fafafa' }" :data="questionList" style="width: 100%;margin-top:10px">
      <el-table-column fixed prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column label="学科" prop="subject" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="100">
        <template v-slot="{row}">
          {{filterQuestionType(row.questionType)}}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
        <template v-slot="{row}">
          <!-- {{ filterHtml(row.question)}} -->
          <p v-html="row.question"></p>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template v-slot="{row}">
          {{formatDate(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template v-slot="{row}">
          {{filterDifficulty(row.difficulty)}}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template v-slot="{row}">
          {{filterChkState(row.chkState)}}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template v-slot="{row}">
          {{filterPublishState(row.publishState)}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template v-slot="{row}">
          <el-button @click="handleClick(row)" type="text" size="small">预览</el-button>
          <el-button type="text" size="small" @click="hAudit(row.id)" :disabled="row.chkState===1">审核</el-button>
          <el-button type="text" size="small" @click="$router.push(`/questions/new/?id=${row.id}`)" :disabled="row.publishState === 1 ">修改</el-button>
          <el-button type="text" size="small" @click="hChoicePublish(row)">
            {{row.publishState === 1 ? '下架' : '上架'}}
          </el-button>
          <el-button type="text" size="small" :disabled="row.publishState === 1 " @click="hDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page" :page-sizes="[10, 20, 30, 40]" :page-size="q.size" background layout="prev, pager, next,sizes, jumper" :total="total">
      </el-pagination>
    </el-row>
    <!-- 文章详情的 dialog -->
    <el-dialog title="文章详情" :visible.sync="showDialog">
      <questionsPreview v-if="showDialog" :id="id" @close="showDialog = false" />
    </el-dialog>
    <!-- 审核的dialog -->
    <el-dialog title="题目审核" width="20%" :visible.sync="showDialogAudit">
      <questionsCheck v-if="showDialogAudit" :auditId="auditId" @close="showDialogAudit = false" @success="success" />
    </el-dialog>
  </div>
</template>

<script>
import { choice, remove, choicePublish } from '../../api/hmmm/questions'
import { simple } from '../../api/hmmm/subjects' // 学科
import { questionType, difficulty, chkType, publishType } from '../../api/hmmm/constants'
import dayjs from 'dayjs'
import questionsPreview from './questions-preview.vue'
import questionsCheck from './questions-check.vue'

const hireType = publishType.reduce((pre, item) => {
  return { ...pre, [item.value]: item.label }
}, {})
export default {
  props: {
    chkState: {
      type: Number
    },
    form: {
      type: Object
    }
  },
  name: 'question-bank',
  components: { questionsPreview, questionsCheck },
  data () {
    return {
      questionList: [],
      q: {
        page: 1,
        size: 10,
        chkState: this.chkState
      },
      total: 0,
      catalogueList: [],
      list: [],
      showDialog: false,
      id: '',
      showDialogAudit: false,
      auditId: ''
    }
  },
  created () {
    this.getChoicenessList()
    this.catalogue()
  },
  methods: {
    // 预览
    handleClick (row) {
      this.id = row.id
      this.showDialog = true
    },
    // 获取所有的精选题库列表
    async getChoicenessList (q = this.q) {
      try {
        const res = await choice(q)
        this.total = res.data.counts
        this.questionList = res.data.items
      } catch (e) {
        console.log(e)
      }
    },
    // 获取学科列表
    async catalogue () {
      const res = await simple()
      this.catalogueList = res.data
    },
    // 筛选学科名称
    filterSubjectName (value) {
      const item = this.catalogueList.find(item => item.value === value)
      return item.label
    },
    // 筛选目录名称
    filterDirectoryName (type) {
      const res = this.list.map(item => ({ id: item.creatorID, name: item.directoryName }))
      const li = res.find(item => item.id === type).name
      console.log(li)
      // return 123
    },
    // 筛选题型名称
    filterQuestionType (type) {
      return questionType.find(item => item.value === +type).label
    },
    // 格式化时间
    formatDate (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 筛选难度名称
    filterDifficulty (type) {
      return difficulty.find(item => item.value === +type).label
    },
    // 筛选审核状态
    filterChkState (type) {
      return chkType.find(item => item.value === type).label
    },
    // 筛选发布状态
    filterPublishState (type) {
      return hireType[type]
    },
    async handleSizeChange (size) {
      this.q.size = size
      const res = await choice(this.q)
      this.total = res.data.counts
      this.questionList = res.data.items
    },
    async handleCurrentChange (page) {
      this.q.page = page
      const res = await choice(this.q)
      this.total = res.data.counts
      this.questionList = res.data.items
    },
    // 删除文章
    async hDel (id) {
      const result = await this.$confirm('确定要删除该题吗？', '提示', { type: 'warning' }).catch(e => e)
      if (result !== 'confirm') return
      try {
        await remove({ id })
        this.$message.success('删除文章成功！')
        if (this.questionList.length === 1 && this.q.page > 1) {
          this.q.page--
        }
        this.getChoicenessList()
      } catch (e) {
        console.log(e)
        this.$message.error('删除文章失败！')
      }
    },
    // 上架
    async hChoicePublish ({ publishState, id }) {
      let result = null
      if (publishState === 0) {
        result = await this.$confirm('确定要上架该试题吗？', '提示').catch(e => e)
        if (result !== 'confirm') return
        try {
          await choicePublish({ id, publishState: 1 })
          this.$message.success('上架成功')
          this.getChoicenessList()
        } catch (e) {
          this.$message.error('上架失败')
        }
      } else {
        result = await this.$confirm('确定要下架该试题吗？', '提示').catch(e => e)
        if (result !== 'confirm') return
        try {
          await choicePublish({ id, publishState: 0 })
          this.$message.success('下架成功')
          this.getChoicenessList()
        } catch (e) {
          this.$message.error('下架失败')
        }
      }
    },
    // 审核按钮，保存当前的 id
    hAudit (id) {
      this.showDialogAudit = true
      this.auditId = id
    },
    // 审核成功之后更新列表数据
    success () {
      this.getChoicenessList()
    }

  }
}

</script>

<style lang='less' scoped>
</style>
